<template>
  <div v-loading="loading1" style="background:white;height:100%;max-height:900px;overflow: auto;font-size:13px;margin-bottom:0px;" >
 <div style="border:1px solid black;padding:20px;margin:20px;height:80%;">

   <el-row >
   <el-col :span="24" style="border:0px">
     <div class="grid-content"  >
       <div style="text-align:center;margin:auto;font-size:30px">{{name}}</div>
     </div>
   </el-col>
 </el-row>
 


 <el-row style="margin-bottom:20px;margin-top:20px;padding:15px;">
   <!-- <el-col :span="10"  style="display:grid; grid-template-columns: repeat(4, 1fr);gap: 10px 10px;" >
     <div v-for="(item,index) in data.moni" :key="index" >
         <div style="display:flex;margin-top:10px;justify-content: spaceAround; ">
                   <div  :style="{width:'50%',color:getColorName(item)}" >{{item.deviceName}}</div>
                   <div  style="margin-left:10px;width:30%;height:20px;border:1px solid;text-align:center;align-content:center" >{{item.remark}}</div>
                   <div style="margin-left:10px;"> {{item.unit}}</div>
         </div>
     </div>
    </el-col> -->
    <el-col :span="22"  style="display:grid; grid-template-columns: repeat(4, 1fr);gap: 10px 10px;" >
     <div v-for="(item,index) in data.kaig" :key="index" style="width:100%">
       <div style="display:flex;margin-left:10px;margin-top:10px;width:100%;text-align:center;justify-content: start;">
           <!-- <div class="circle"></div> -->
           <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
           <div  :style="{'margin-left':'10px',color:getColorName(item)}" >{{item.deviceName}}</div>
       </div>
     </div>
    </el-col>
 </el-row>
 </div>
</div>

</template>
<script>
// import deviceImg from '@/assets/images/5000_eleGroup.jpg'
import { mapState } from "vuex";
import {listDevs} from  "@/api/system/device";
export default {
name:"test",
async created(){
//  console.log(222)
    let res= await this.getConfigKey("sys.server.version")
    this.version =res.msg||this.version;
    try{
      this.url='url(' +require('@/assets/images/'+this.version+'_eleGroup.jpg')+')'
    }catch(e){
      this.url='url(' +require('@/assets/images/5000_eleGroup.jpg')+')'
    }
      this.dev= (this.type=="01")?this.dev_01:((this.type=='02')?this.dev_02:this.dev)
  this.name =("01"==this.type)?'1#主柴油发电机':(("02"==this.type)?'2#主柴油发电机':"应急配电板")
  
  if(null==this.timer){
  this.timer=  setInterval(() =>{
      this.init();
  },3000);
  }else{
       this.init()
  }
},
beforeDestroy() {
if(this.timer){
clearInterval(this.timer);
this.timer=null;
}
},
methods:{

init(){
  listDevs({"deptId":this.deptId}).then(response=>{
      this.loading1=false
      // console.log(this.datas)
      let dataArr =response.data;
      // console.log(dataArr)
      if(dataArr){
        // let moni= this.type=='01'?'03M':(this.type=='02'?'04M':this.type=='03'?'09M':'')
        let kaig= this.type=='01'?'03K':(this.type=='02'?'04K':this.type=='03'?'10K':'')
          // this.data.moni= dataArr.filter(item=>{
          // return   item.systemId.startsWith(moni)//开关量
          // }).sort((a,b)=> {
          // return a.systemId.split("-")[1]-b.systemId.split("-")[1]})

          this.data.kaig= dataArr.filter(item=>{
              return    item.systemId.startsWith(kaig) && item.deviceName.includes("应急配电板") //开关量
          }).sort((a,b)=> {
              return a.systemId.split("-")[1]-b.systemId.split("-")[1]})

        //   this.devList=dataArr.filter(item=>{
        //       return this.arr.some(v=>item.systemId==v)
            
        //   }).sort((a,b)=> {
        //       return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
        }
        
        // this.one=dataArr.filter(item=>{
        //      return this.dev.includes(item.systemId)
        //   }).sort((a,b)=> {
        //       return a.systemId.split("-")[1]-b.systemId.split("-")[1]})


  })
},
getFlash(row){
//2、报警消息时，闪烁
let f = this.alarmList.some(alarm=>
  alarm ==row.deviceId
);
if(f){
if(row.displayAlarm=="2"){//告警
  return true;
}
}
if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
{//1、试灯打开
console.log("extExpSwitch=="+this.extExpSwitch)
if(row.displayAlarm=="2"){//告警
  return true;
}
}
return false;
},
getColorName(row){
//告警消息
if("2"== row.displayAlarm){
let f = this.alarmList.some(alarm=>
alarm ==row.deviceId
);
if(f){
return 'red';
}

//3、显示设备状态颜色
if(row.warnStatus=='1'||row.warnStatus=='0'){
  return 'black';
  }
  return 'red'

            
}
return "black";

},
getColor(row){
// console.log(row)

   if("2"== row.displayAlarm){  //告警类型
      //告警消息
      let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
          );
          if(f){//2、有报警通知，则显示灯的颜色
            return row.lightColor;
          }
      }
      if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
        console.log("extExpSwitch=="+this.extExpSwitch)
          return row.lightColor;
      }
      //3、显示设备状态颜色
      if(row.warnStatus=='1'||row.warnStatus=='0'){
        return 'grey';
      }
      return row.lightColor;
}

},
computed:{
...mapState("app", {   // 对象形式
alarmList: "alarmList",
lightSwitch:"lightSwitch",
extExpSwitch:"extExpSwitch"
})
},
data() {
  return{
          version:'5000',
          dev:['09M-001','09M-002','09M-003','09M-004','09M-005','09M-007','09M-008'],
          dev_01:['03M-001','03M-002','03M-004','03M-006','03M-008','03M-009'],
          dev_02:['04M-001','04M-002','04M-004','04M-006','04M-008','04M-009'],
          loading1:true,
          url:"",
          title:(this.$route.query.type=='01')?"1号发电机组":(this.$route.query.type=='02')?'2号发电机组':'3号发电机组',
          key1:"",
          key2:"",
          arr:[],
         
          devList:[],
          one:{deviceName:"",remark:"",unit:""},
          two:{deviceName:"",remark:"",unit:""},
          timer:null,
          type:this.$route.query.type,
          data:{kaig:[],moni:[]},
          deptId:this.$route.query.depCode,
          name:null,

      }
  }
}
</script>
<style scoped >
*{
margin:0;
padding:0;
}
.el-row {

&:last-child {
margin-bottom: 0;
}
}

.el-col {
height: 100%;
/* border:1px solid; */
border-radius: 0px;
}
.circle{
border: 2px solid black;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
/* background-color: white; */

font-size: 10px;
}
.bg-purple-dark {
/* background: #99a9bf; */
}
.bg-purple {
/* background: #d3dce6; */
}
.line {
border-right: 2px solid #010101;
display: inline-block;
/* margin-bottom: -12px; */
}

.bg-purple-light {
/* background: #e5e9f2; */
}
.grid-content {
text-wrap:wrap;
font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
}
.diagonal-line {
animation: rotate 1s linear infinite ;
animation-fill-mode:forwards;
animation-iteration-count: 1;
transform-origin: 0 0;
}

@keyframes rotate{
from{
transform: rotate(-40deg);
}
to{
transform: rotate(0deg);
}
}
.diagonal-line1 {
animation: rotate1 0.1s linear infinite ;
animation-fill-mode:forwards;
animation-iteration-count: 1;
transform-origin: 0 0;
}

@keyframes rotate1{
from{
transform: rotate(-0deg);
}
to{
transform: rotate(-40deg);
}
}
.item {
flex: 0 0 auto;
margin: 10px;
}
.row-bg {
padding: 10px 0;
/* background-color: #f9fafc; */
}

.alarmDiv{
display:block;
-webkit-animation-name: imageAnim;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease;
-webkit-animation-play-state: running;
}
@-webkit-keyframes imageAnim{
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 0;}
}

</style>
